<!--k神大礼包-->
<template>
  <div class="admin-body">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item >K神大礼包</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row style="padding: 15px">
      <el-row class="main">
        <div class="titleTxt">
         <p>K神大礼包</p>
        </div>
        <!--表格-->
        <el-table
          select-on-indeterminate
          ref="multipleTable"
          style="margin: 20px 0 10px 0;"
          border
          align="left"
          :data="tableDataK">
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="gift_name"
            label="礼包名称">
          </el-table-column>
          <el-table-column
            prop="money"
            label="礼包金额">
          </el-table-column>
          <el-table-column
            label="有效期限"
            width="250">
            <template slot-scope="scope">
              <span style="margin-right: 5px;">{{formatDate(scope.row.start_time)}}</span>
              至
              <span style="margin-left: 5px;">{{formatDate(scope.row.over_time)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="intro"
            label="礼包简介">
          </el-table-column>
          <el-table-column
            prop="rule"
            label="温馨提示">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button    style="color: rgba(243, 93, 96, 1)" @click="changeMes(scope.row.id,0)"  size="small" type="text">
                删除
              </el-button>
              <el-button @click="editK(scope.row)"  size="small" type="text">
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>


        <div class="titleTxt" style="">
        <p>核销列表</p>
        </div>
        <el-row  style="min-height: 40px">
          <el-col  style="margin-bottom: 10px;display: flex;margin-top: 10px;" align="left">
            <el-input v-model="key" clearable style="width: 200px;" placeholder="输入关键词查询" class="kz_search">
              <el-button slot="append" type="primary"  @click="getstart()">搜索</el-button>
            </el-input>
            <el-select style="margin-left: 20px" v-model="shop_name" clearable  @change="getstartSelect()" placeholder="请选择KTV查询">
              <el-option
                v-for="item in shopData"
                :key="item.name"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
            <span style="line-height: 32px;text-align: right;flex: 1">核销次数：{{dataTotal}}次</span>
          </el-col>
        </el-row>
        <!--表格-->
        <el-table
          select-on-indeterminate
          ref="multipleTable"
          border
          align="left"
          :data="tableData">
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="nickname"
            label="用户昵称">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="用户手机号">
          </el-table-column>
          <el-table-column
            prop="gift_name"
            label="礼包名称">
          </el-table-column>
          <el-table-column
            prop="coupon_code"
            label="券码">
          </el-table-column>
          <el-table-column
            prop="get_time"
            label="获券时间">
            <template slot-scope="scope">
              {{formatDate(scope.row.get_time)}}
            </template>
          </el-table-column>
          <el-table-column
            label="核销时间">
            <template slot-scope="scope">
              {{formatDate(scope.row.use_time)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="shop_name"
            label="核销KTV">
          </el-table-column>
          <el-table-column
            prop="operate"
            label="核销人">
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-row style="margin-top: 20px">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" align="right">
            <el-pagination
              style="text-align: right;margin-bottom:70px;"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dataTotal">
            </el-pagination>
          </el-col>
        </el-row>
      </el-row>
    </el-row>
    <el-dialog title="编辑" :visible.sync="editVisible" width="500px" :modal-append-to-body="false">
      <el-form :model="editdata" :rules="editrules" ref="adddata">
        <el-form-item label="大礼包名称：" :label-width="formLabelWidth" prop="gift_name">
          <el-input v-model="editdata.gift_name"></el-input>
        </el-form-item>
        <el-form-item label="礼包简介：" :label-width="formLabelWidth" prop="intro">
          <el-input v-model="editdata.intro"></el-input>
        </el-form-item>
        <el-form-item label="使用规则：" :label-width="formLabelWidth" prop="rule">
          <el-input v-model="editdata.rule"></el-input>
        </el-form-item>
        <el-form-item label="礼包金额：" :label-width="formLabelWidth" prop="money">
          <el-input v-model="editdata.money"></el-input>
        </el-form-item>
        <el-form-item label="礼包开始时间：" :label-width="formLabelWidth" prop="start_time">
          <el-date-picker
            v-model="editdata.start_time"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="礼包到期时间：" :label-width="formLabelWidth" prop="over_time">
          <el-date-picker
            v-model="editdata.over_time"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="SubmitEdit()">确 定</el-button>
        <el-button @click="editVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "GiftPackage",
    mounted() {
      // if (!this.$store.state.login.in) {
      //   this.$router.push({name: "login", params: {userId: 123}})
      // }
      this.getstartK()
      this.getstart()
      this.getShop()
    },
    data() {
      return {
        pageSizeK: 10,
        pageK: 1,
        dataTotalK: 0,
        tableDataK:[],
        pageSize: 10,
        page: 1,
        dataTotal: 0,
        key:'',
        shop_name:'',
        type:'',
        shopData: [],
        tableData:[],
        addVisible:false,
        editVisible:false,
        editdata:{
          id:'',
          gift_name:'',
          rule:'',
          money:'',
          intro:'',
          start_time:'',
          over_time:'',
        },
        editrules:{
          gift_name: [
            {required: true, message: '请输入礼包名称', trigger: 'blur'}
          ],
          rule: [
            {required: true, message: '请输入礼包规则', trigger: 'blur'}
          ],
          money: [
            {required: true, message: '请输入礼包金额', trigger: 'blur'}
          ],
          intro: [
            {required: true, message: '请输入礼包简介', trigger: 'blur'}
          ],
          start_time: [
            {required: true, message: '请选择开始时间', trigger: 'blur'}
          ],
          over_time: [
            {required: true, message: '请选择结束时间', trigger: 'blur'}
          ],
        },
        formLabelWidth:'120px'

      }
    },
    methods: {
      //商铺列表
      getShop() {
        let thi = this
        const prams = {
          page:1,
          pageSize:9999,
          key:'',
        }
        thi.mySelectAll('shopList',prams).then(function (value) {
          thi.shopData = value.data
        })
      },
      editK(data){
        console.log(data)
        this.editdata = JSON.parse(JSON.stringify(data))
        this.editdata.id = data.id
        this.editdata.start_time = data.start_time * 1000
        this.editdata.over_time = data.over_time * 1000
        this.editVisible = true
      },
      SubmitEdit(){
        let thi = this
        if (thi.editdata.gift_name == '' || thi.editdata.rule == '' || thi.editdata.intro == ''
          || thi.editdata.start_time == '' || thi.editdata.over_time == '' || thi.editdata.money == ''){
          thi.$message({
            message: '请上传完整信息！',
            type: 'error',
          });
          return false
        }
        thi.editdata.start_time = thi.editdata.start_time / 1000
        thi.editdata.over_time = thi.editdata.over_time / 1000
        thi.mySubmit('editGift', thi.editdata).then(function (code) {
          if (code==200) {
            thi.editVisible = false
            thi.getstartK()
          }
        })
      },
      //K神大礼包
      getstartK() {
        let thi = this
        const prams = {
          page:thi.pageK,
          pageSize:thi.pageSizeK,
          key:thi.key,
        }
        thi.mySelectAll('giftList',prams).then(function (value) {
          thi.tableDataK = value.data
        })
      },
      //删除K神大礼包提示
      changeMes(id, state) {
        var heeh = '该'
        var caozuo = '禁用'
        if (id.length > 1) {
          heeh = '这些'
        }
        if (state == 0) {
          caozuo = '删除'
        }
        let thi = this
        thi.$confirm('此操作将'+caozuo + heeh+'大礼包', '是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          thi.deleteMember(id,state)
        }).catch(() => {
          thi.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      //删除礼包
      deleteMember(id,state) {
        let thi = this
        const por = {
          id: id,
          state: state,
        }
        thi.mySubmit('editStateK', por).then(function (code) {
          if (code == 200) {
            thi.getstartK()
          }
        })
      },
      getstartSelect(){
        this.page = 1
        this.getstart()
      },
      //礼包核销列表
      getstart() {
        let thi = this
        const prams = {
          page:thi.page,
          pageSize:thi.pageSize,
          key:thi.key,
          shop_name:thi.shop_name,
        }
        thi.mySelectAll('disposeList',prams).then(function (value) {
          thi.tableData = value.data
          thi.dataTotal = value.Total
        })
      },
      //选择展示数量
      handleSizeChange(val) {
        this.pageSize = val
        this.getstart()
      },
      //分页
      handleCurrentChange(val) {
        this.page = val
        this.getstart()
      },

      submitState(id,state) {
        let thi = this
        const por = {
          id: id,
          admin_state: state,
        }
        thi.mySubmit('stateChange', por).then(function (code) {
          if (code == 200) {
            thi.getstart()
          }
        })
      },
    }
  }

</script>

<style scoped>
  .main {
    background-color: white;
    min-height: 500px;
    padding: 10px;
    border: #EDEDED 1px solid;
    border-radius: 5px;
  }
  .el-row{
    /*防止页面抖动*/
    width: calc(100% - 2px) !important;
  }
  select{
    border:none;
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
  }
  /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
  select::-ms-expand {
    display: none;
  }

  .titleTxt{
    font-weight: bold;
    border-left: 5px solid #409eff;
    text-align: left;
    margin-bottom: 10px;
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
  }
</style>
